<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#pic{
				content: '';
			    display: block;
			    margin: 13px auto 3px;
			    width: 240px;
			    height: 214px;
			    background: url(../img/xiazai.png) center center no-repeat;
			    background-size: 24px auto;
			}
			#pic img{
				width: 240px;
				height: ;
			}
			.shanchu{
			    position: absolute;
			    top: -8px;
			    right: -8px;
			    width: 30px;
			    height: 30px;
			    border-radius: 100%;
			    background: url(asset/img/shanchu.png) center center/9px 9px no-repeat rgba(0,0,0,.7);
			    text-indent: -999em;
			    z-index: 2;
			    display: none;
			}
		</style>
	</head>
	<body>
		<div style="position: relative; width: 240px;">
			<img  class="pic" src="asset/img/xiazai.png" >
			<a class="shanchu"></a>
			<input class="upload" name="file" accept="image/*" type="file" style="display: none"/>&nbsp;
		</div>
	</body>
	<script type="text/javascript" src="public/jquery.min.js" ></script>
	<script>
	$(function() {
		$(".pic").click(function() {
			$(".upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
			$(".upload").on("change", function() {
				var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
				if(objUrl) {
					$(".pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
					$(".pic").next().show();
					$(".shanchu").click(function(){
						$(".pic").attr("src", "asset/img/xiazai.png");
						$(".pic").next().hide();
					})
				}
			});
		});
	});
	//建立一個可存取到該file的url
	function getObjectURL(file) {
		var url = null;
		if(window.createObjectURL != undefined) { // basic
			url = window.createObjectURL(file);
		} else if(window.URL != undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file);
		} else if(window.webkitURL != undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file);
		}
	return url;
}</script>
</html>
